import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 进度条，关闭的小圆圈
NProgress.configure({
  showSpinner: false
})

// 创建路由实例对象
const router = createRouter({
  // 指定路由的模式  访问服务器地址前缀
  // createWebHistory: 指定为history模式
  // createWebHashHistory：指定为hash模式
  // import.meta.env.BASE_URL 指定路由模式时配置服务器地址前缀----》
  // vite.config里面base设置的
  history: createWebHistory(import.meta.env.BASE_URL),
  // 填写路由规则
  routes: [
    // 配置登陆页面的路由规则
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login/index.vue')
    },
    {
      path: '/',
      component: () => import('../views/Layout/index.vue'),
      redirect: '/home',
      // 四个二级路由，路由的出口在 Layout组件中
      children: [
        {
          path: 'home',
          name: 'home',
          component: () => import('../views/Home/index.vue'),
          meta: { title: '首页' }
        },
        {
          path: 'article',
          name: 'article',
          component: () => import('../views/Article/index.vue'),
          meta: { title: '健康百科' }
        },
        {
          path: 'notify',
          name: 'notify',
          component: () => import('../views/Notify/index.vue'),
          meta: { title: '消息通知' }
        },
        {
          path: 'user',
          name: 'user',
          component: () => import('../views/User/index.vue'),
          meta: { title: '我的' }
        }
      ]
    },
    {
      path: '/user/patient',
      name: 'patient',
      component: () => import('../views/User/PatientPage.vue'),
      meta: {
        title: '家庭档案'
      }
    },
    {
      path: '/consult/fast',
      component: () => import('../views/Consult/ConsultFast.vue'),
      meta: {
        title: '极速问诊'
      }
    },
    {
      path: '/consult/dep',
      component: () => import('../views/Consult/ConsultDep.vue'),
      meta: {
        title: '选择科室'
      }
    },
    {
      path: '/consult/illness',
      component: () => import('../views/Consult/ConsultIllness.vue'),
      meta: {
        title: '病情描述'
      }
    },
    {
      path: '/consult/pay',
      component: () => import('../views/Consult/ConsultPay.vue'),
      meta: {
        title: '问诊支付'
      }
    },
    {
      path: '/room',
      component: () => import('../views/Room/index.vue'),
      meta: {
        title: '问诊室聊天'
      }
    }
  ]
})

// 路由守卫：实现权限的控制
router.beforeEach((to, from) => {
  NProgress.start() // 开启进度条
  // // 去哪里的 标题
  // document.title = `优医问诊-${to.meta.title}`
  console.log(to, 'to....')
  console.log(from, 'from....')
  const store = useUserStore()
  // 判断用户有没有登陆 token
  // 判断当前要去的是不是白名单页面
  const whiteList = ['/login']
  // 如果没有登陆，没有且不在白名单中，那么就跳转到login页面---》 return 跳转的路径
  if (!store.userInfo?.token && !whiteList.includes(to.path)) return '/login'

  // return true  或者什么都不写 ，直接放行
})

// 页面跳转完成执行的钩子函数afterEach
router.afterEach((to) => {
  // 去哪里的 标题
  document.title = `优医问诊-${to.meta.title}`
  NProgress.done() // 关闭进度条
})

export default router
